<template>
    <div class="entity-material">
        <h3>Entity材质和外观</h3>
        <div class="material-info">
            <p><strong>说明：</strong>Entity支持多种材质类型和外观效果</p>
            <p>包括颜色、透明度、纹理贴图、垂直拉伸等</p>
        </div>
        <div class="material-controls">
            <button @click="createColorMaterial" class="material-btn">颜色材质</button>
            <button @click="createTextureMaterial" class="material-btn">纹理材质</button>
            <button @click="createStripeMaterial" class="material-btn">条纹材质</button>
            <button @click="createCheckerboardMaterial" class="material-btn">棋盘材质</button>
            <button @click="createGridMaterial" class="material-btn">网格材质</button>
            <button @click="createExtrudedShape" class="material-btn">垂直拉伸</button>
            <button @click="createAnimatedMaterial" class="material-btn">动画材质</button>
            <button @click="clearMaterials" class="clear-btn">清除所有</button>
        </div>
        <div class="material-status">
            <p v-if="materialCount > 0">已创建 {{ materialCount }} 个材质Entity</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, inject, onMounted } from 'vue';
import { XbsjEarthUi } from '../../../../scripts/xbsjEarthUi';
import EntityManager from './entityManager';

const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi;
const materialCount = ref(0);
const entityManager = EntityManager.getInstance();

// 获取EarthUI中的Cesium原生Viewer实例
const getCesiumViewer = () => {
    return xbsjEarthUi.activeViewer?.innerViewer?.viewer;
};

// 创建颜色材质
const createColorMaterial = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        viewer.entities.add({
            position: (window as any).Cesium.Cartesian3.fromDegrees(116.0, 40.0), // 北京
            name: 'Color Material Entity',
            ellipse: {
                semiMinorAxis: 250000.0,
                semiMajorAxis: 400000.0,
                material: (window as any).Cesium.Color.RED.withAlpha(0.5),
                outline: true,
                outlineColor: (window as any).Cesium.Color.BLUE.withAlpha(0.5),
                outlineWidth: 10.0
            }
        });
        materialCount.value++;
        console.log('颜色材质Entity创建成功');
    } catch (error) {
        console.error('创建颜色材质失败:', error);
    }
};

// 创建纹理材质
const createTextureMaterial = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        viewer.entities.add({
            position: (window as any).Cesium.Cartesian3.fromDegrees(121.0, 31.0), // 上海
            name: 'Texture Material Entity',
            rectangle: {
                coordinates: (window as any).Cesium.Rectangle.fromDegrees(120.0, 30.0, 122.0, 32.0),
                material: new (window as any).Cesium.ImageMaterialProperty({
                    image: 'https://n.sinaimg.cn/news/transform/20170322/XiMs-fycnyhm2074019.jpg',
                    // repeat: new (window as any).Cesium.Cartesian2(2.0, 2.0),
                    color: (window as any).Cesium.Color.WHITE.withAlpha(0.9)
                })
            }
        });
        materialCount.value++;
        console.log('纹理材质Entity创建成功');
    } catch (error) {
        console.error('创建纹理材质失败:', error);
    }
};

// 创建条纹材质
const createStripeMaterial = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        viewer.entities.add({
            position: (window as any).Cesium.Cartesian3.fromDegrees(113.0, 23.0), // 广州
            name: 'Stripe Material Entity',
            rectangle: {
                coordinates: (window as any).Cesium.Rectangle.fromDegrees(112.0, 22.0, 114.0, 24.0),
                material: new (window as any).Cesium.StripeMaterialProperty({
                    evenColor: (window as any).Cesium.Color.WHITE,
                    oddColor: (window as any).Cesium.Color.BLACK,
                    orientation: (window as any).Cesium.StripeOrientation.HORIZONTAL,
                    repeat: 10
                })
            }
        });
        materialCount.value++;
        console.log('条纹材质Entity创建成功');
    } catch (error) {
        console.error('创建条纹材质失败:', error);
    }
};

// 创建棋盘材质
const createCheckerboardMaterial = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        viewer.entities.add({
            position: (window as any).Cesium.Cartesian3.fromDegrees(104.0, 30.0), // 成都
            name: 'Checkerboard Material Entity',
            rectangle: {
                coordinates: (window as any).Cesium.Rectangle.fromDegrees(103.0, 29.0, 105.0, 31.0),
                material: new (window as any).Cesium.CheckerboardMaterialProperty({
                    evenColor: (window as any).Cesium.Color.WHITE,
                    oddColor: (window as any).Cesium.Color.BLACK,
                    repeat: new (window as any).Cesium.Cartesian2(4.0, 4.0)
                })
            }
        });
        materialCount.value++;
        console.log('棋盘材质Entity创建成功');
    } catch (error) {
        console.error('创建棋盘材质失败:', error);
    }
};

// 创建网格材质
const createGridMaterial = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        viewer.entities.add({
            position: (window as any).Cesium.Cartesian3.fromDegrees(108.0, 34.0), // 西安
            name: 'Grid Material Entity',
            rectangle: {
                coordinates: (window as any).Cesium.Rectangle.fromDegrees(107.0, 33.0, 109.0, 35.0),
                material: new (window as any).Cesium.GridMaterialProperty({
                    color: (window as any).Cesium.Color.YELLOW,
                    cellAlpha: 0.2,
                    lineCount: new (window as any).Cesium.Cartesian2(8.0, 8.0),
                    lineThickness: new (window as any).Cesium.Cartesian2(2.0, 2.0)
                })
            }
        });
        materialCount.value++;
        console.log('网格材质Entity创建成功');
    } catch (error) {
        console.error('创建网格材质失败:', error);
    }
};

// 创建垂直拉伸形状
const createExtrudedShape = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        viewer.entities.add({
            position: (window as any).Cesium.Cartesian3.fromDegrees(108.0, 34.0), // 西安
            name: 'Extruded Shape Entity',
            ellipse: {
                semiMinorAxis: 250000.0,
                semiMajorAxis: 400000.0,
                height: 200000.0,
                extrudedHeight: 400000.0,
                fill: true,
                material: (window as any).Cesium.Color.RED.withAlpha(0.5),
                outline: true,
                outlineColor: (window as any).Cesium.Color.BLUE.withAlpha(0.5),
                outlineWidth: 10.0
            }
        });
        materialCount.value++;
        console.log('垂直拉伸Entity创建成功');
    } catch (error) {
        console.error('创建垂直拉伸失败:', error);
    }
};

// 创建动画材质
const createAnimatedMaterial = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        const entity = viewer.entities.add({
            position: (window as any).Cesium.Cartesian3.fromDegrees(120.0, 30.0), // 杭州
            name: 'Animated Material Entity',
            box: {
                dimensions: new (window as any).Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
                material: (window as any).Cesium.Color.CYAN.withAlpha(0.7),
                outline: true,
                outlineColor: (window as any).Cesium.Color.BLACK
            }
        });

        // 创建颜色动画
        entity.box.material = (window as any).Cesium.Color.CYAN.withAlpha(0.7);
        
        // 定期修改颜色
        setInterval(() => {
            if (entity && entity.box && entity.box.material) {
                entity.box.material = (window as any).Cesium.Color.fromRandom({ alpha: 0.7 });
            }
        }, 2000);

        materialCount.value++;
        console.log('动画材质Entity创建成功');
    } catch (error) {
        console.error('创建动画材质失败:', error);
    }
};

// 清除所有材质Entity
const clearMaterials = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        // 只清除全局管理器中的Entity
        entityManager.clearAllEntities(viewer);
        materialCount.value = 0;
        console.log('材质Entity已清除');
    } catch (error) {
        console.error('清除材质Entity失败:', error);
    }
};

onMounted(() => {
    // 组件加载时检查现有Entity数量
    const viewer = getCesiumViewer() as any;
    if (viewer) {
        materialCount.value = viewer.entities.values.length;
    }
});
</script>

<style scoped>
.entity-material {
    width: 280px;
    box-sizing: border-box;
    padding: 10px;
}

.material-info {
    box-sizing: border-box;
    font-size: 14px;
    padding: 10px;
    background-color: #000000;
    border-radius: 4px;
    margin-bottom: 15px;
}

.material-controls {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.material-btn, .clear-btn {
    margin-bottom: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.material-btn {
    background-color: #FF5722;
    color: white;
}

.material-btn:hover {
    background-color: #E64A19;
}

.clear-btn {
    background-color: #f44336;
    color: white;
}

.clear-btn:hover {
    background-color: #d32f2f;
}

.material-status {
    padding: 10px;
    background-color: #000000;
    border-radius: 4px;
    border-left: 4px solid #FF5722;
    color: #FF5722;
    font-weight: bold;
}
</style>
